Skip to main content

Exécuter en tant que WebVisu

Recommandations pour la protection des données

Afin de minimiser le risque de failles de sécurité des données, nous recommandons les mesures organisationnelles et techniques suivantes pour le système qui exécutera vos applications :

  • Utilisez le le plus récent versions du serveur de passerelle et du serveur Web.

  • Dans la mesure du possible, évitez d’exposer vos automates et vos réseaux de contrôleurs aux réseaux publics ou à Internet.

  • Configurez une connexion HTTPS (cryptage avec SSL/TSL) entre le client de visualisation et le serveur Web.

  • Utilisez des couches de liaison de données supplémentaires pour la protection, telles que VPN pour l’accès à distance, et installez des mécanismes de pare-feu.

  • Restreindre l'accès aux personnes autorisées.

    Restreignez l'accès à la visualisation et configurez une gestion des utilisateurs de visualisation.

  • Lors de la mise en service, modifiez tous les mots de passe par défaut existants et changez-les régulièrement.

Astuce

Si vous souhaitez toujours publier votre WebVisu, alors nous fortement nous vous recommandons de lui attribuer au moins une base protection par mot de passe pour empêcher l'accès aux fonctionnalités de votre automate via Internet.

La variante d'affichage basée sur le Web de CODESYS Visualization Permet l'accès à distance, la surveillance, ainsi que l'entretien et le diagnostic d'une installation via Internet. Un navigateur web communique avec le serveur web du contrôleur via JavaScript, via un cryptage SSL, et affiche la visualisation en HTML5. Cette technologie est prise en charge par la quasi-totalité des navigateurs et est donc disponible sur les terminaux iOS et Android.

Les visualisations qui sont exécutées comme CODESYS WebVisu Il s'agit donc d'applications web affichées dans un navigateur. Pour cela, le système d'exécution du contrôleur doit disposer d'un serveur web compatible WebVisu, qui prend en charge la communication entre le système cible et le navigateur web. Le serveur web démarre automatiquement dès le lancement d'une application configurée avec WebVisu.CODESYS WebVisu Le serveur Web fonctionne jusqu'à la fin de toutes les applications utilisant WebVisu. Pendant ce temps, un utilisateur de visualisation peut surveiller et utiliser le contrôleur dans un navigateur Web compatible HTML5, depuis un terminal.

Pour plus d'informations, voir :

Configuration et démarrage d'une variante d'affichage

Les paramètres spécifiques à l'application pour l'application Web sont configurés dans le WebVisu objet.

Situation initiale : Une visualisation exécutable VisuMain avec une configuration de tâche de gestionnaire de visualisation a été créée dans le projet.

  1. Sélectionnez le Gestionnaire de visualisation objet.

    Dans le menu contextuel, cliquez sur Ajouter un objet → Objet WebVisu.

  2. Nommez l'objet comme webvisu_app et confirmez les paramètres.

    L'éditeur correspondant s'ouvre avec ses paramètres par défaut.

  3. Configurer comme suit :

    • Démarrer la visualisation: VisuMain

    • Nom du fichier .htm: webvisu_app

  4. Cliquez Afficher les visualisations utilisées.

    Le Visualisations L'onglet s'ouvre. Il affiche ici quel objet de visualisation est activé pour quelle variante.

  5. Si nécessaire, activez la visualisation pour la variante webvisu_app.

    La variante est sélectionnée pour le téléchargement.

  6. Ouvrez l’éditeur de périphériques et configurez les paramètres de communication de votre contrôleur.

  7. Démarrez votre contrôleur avec un environnement d'exécution approprié avec un serveur Web et la prise en charge de WebVisu.

  8. Compilez, téléchargez et démarrez l'application.

    L'application et le serveur Web sont en cours d'exécution.

  9. Démarrez un navigateur Web avec l'adresse suivante : http://localhost:8080/webvisu_app.htm

    L'application web s'affiche. La visualisation est active et vous pouvez utiliser votre contrôleur.

Appeler la page dans un navigateur

Exigence : Une visualisation est démarrée avec WebVisu.

  1. Démarrez un navigateur actuel avec prise en charge JavaScript et prise en charge du canevas HTML5 (par exemple, Microsoft Edge, Google Chrome ou Mozilla Firefox).

  2. Spécifiez l'adresse suivante dans le navigateur Web :

    http://localhost:8080/webvisu.htm

    Formel : http://<adresse IP du serveur Web>:<port du serveur Web>/<nom du fichier HTM>

    Le <nom du fichier HTM> est la page de démarrage HTM de la visualisation définie dans le WebVisu objet.

    La page s'affiche et vous pouvez voir les données de l'application et l'application est en cours d'exécution.

Activation du navigateur Web avec un en-tête « Sécurité HTTP »

Le serveur web du système d'exécution exécutant WebVisu peut être configuré de manière à fournir des en-têtes « Sécurité HTTP » supplémentaires. Cela permet, par exemple, d'activer des fonctionnalités de sécurité supplémentaires telles que les options X-Frame.

Pour activer un ou plusieurs en-têtes, vous pouvez configurer les paramètres nécessaires dans le répertoire d'installation de CODESYS dans le fichier de configuration du CODESYS Control Win système d'exécution :

Formel : <répertoire d'installation>/GatewayPLC/CODESYSControl.cfg

Spécifiez les paramètres sous le [CmpWebServer] section.

Note

Pour le navigateur Web (partie du CODESYS Control Win (système d'exécution), aucune valeur par défaut n'est spécifiée pour l'en-tête « Sécurité HTTP ». Cet en-tête n'est pas activé par défaut, car sa fonctionnalité dépend trop de l'environnement.

Pour plus d'informations, voir :

Exemple 31. Exemple

L'extrait de code suivant est un extrait du CODESYSControl.cfg fichier de configuration. L'en-tête X-Content-Type-Options est activé.

[CmpWebServer]
AdditionalHeader.0.Header="X-Content-Type-Options: nosniff"
AdditionalHeader.0.FileFilter.0="WebVisuV3.bin"
AdditionalHeader.0.ExtensionFilter.0="xml"
AdditionalHeader.0.ExtensionFilter.1="js
  • AdditionalHeader.<X>.Header est toujours nécessaire.

  • AdditionalHeader.<X>.FileFilter.<Y> restreint AdditionalHeader.<X>.Header au nom de fichier spécifié (facultatif).

  • AdditionalHeader.<X>.ExtensionFilter.<Y> restreint AdditionalHeader.<X>.Header à l'extension de fichier spécifiée (facultatif).

  • AdditionalHeader.<X>.Header est utilisé pour tous les fichiers lorsque AdditionalHeader.<X>.FileFilter et AdditionalHeader.<X>.ExtensionFilter ne sont pas configurés.

L'en-tête X-Content-Type-Options peut être inséré pour "WebVisuV3.bin " et tous les fichiers qui se terminent par ".xml " et ".js".



Déterminer et appeler la page par défaut sur le serveur Web

Exigences : plusieurs visualisations exécutables sont disponibles dans le projet (visu_main, visu_for_experts). Un objet WebVisu est configuré pour chacune des visualisations (WebVisu_main, WebVisu_for_experts). Les pages HTML correspondantes sont nommées webvisu_main et webvisu_for_an_expert.

  1. Double-cliquez sur l'objet WebVisu_main.

    L'éditeur WebVisu s'ouvre.

  2. Sélectionnez le Utiliser comme page par défaut option.

    La page de démarrage qui est spécifiée dans le Nom du fichier HTM la propriété est définie par défaut.

  3. Démarrez un navigateur Web actuel (sur n’importe quel ordinateur).

  4. Spécifiez uniquement l'adresse IP et le port du contrôleur dans le navigateur Web sans le nom de la page HTML :

    http://localhost:8080

    Officiel:

    http://<adresse IP du serveur Web>:<port du serveur Web>

    La page par défaut webvisu_main.htm s'ouvre. Vous pouvez voir les données de l'application et l'application est en cours d'exécution.

  5. Dans le navigateur Web, spécifiez l'adresse suivante sur un autre appareil (par exemple un smartphone) :

    http://localhost:8080/webvisu_for_an_expert.htm

    La visualisation spécifiée webvisu_for_an_expert.htm s'ouvre.

Identifier un WebVisu

Pour pouvoir identifier un WebVisu au moyen de la bibliothèque POU VisuFbClientTagDataHelper Le WebVisu a besoin d'un nom. Pour pouvoir l'utiliser directement dans l'application, étendez l'appel d'URL avec le paramètre ClientName=<name>.

Exemple:

http://localhost:8080/webvisu.htm?ClientName=VisClientxy

Utilisation d'une connexion HTTPS cryptée

Important

Privilégiez l’utilisation de certificats signés par une autorité de certification.

Note

Pour qu'un certificat soit considéré comme sécurisé par le navigateur, il doit avoir été signé par une autorité de certification. En règle générale, chaque navigateur dispose d'une liste d'autorités de certification de confiance. Un tel certificat peut être vérifié par le navigateur lui-même afin qu'aucun message d'avertissement ne s'affiche lors de l'établissement d'une connexion sécurisée. La signature d'un certificat émanant de l'une de ces autorités de certification de confiance est généralement payante.

Vous pouvez également utiliser un certificat que vous avez créé vous-même. L'inconvénient est que ce certificat doit être vérifié dans le navigateur. Ce dernier émet alors un avertissement indiquant que la connexion n'est pas fiable. Vous pouvez alors ajouter une exception afin que cet avertissement n'apparaisse pas à chaque ouverture de connexion. Cependant, pour vous assurer que la communication s'effectue bien avec le bon contrôleur, il est nécessaire de comparer la valeur de signature du certificat avec celle de votre propre contrôleur.

Un certificat est requis pour établir une connexion sécurisée entre votre navigateur et le serveur web via une connexion HTTPS. Il est conseillé d'utiliser le CODESYS Security Agent pour installer un certificat de contrôle valide pour la communication cryptée.

Procédure. Installation du CODESYS Security Agent
  1. Cliquez Voir → Boutique et connectez-vous.

  2. Rechercher le CODESYS Security Agent et démarrez le téléchargement.

    Le paquet est installé et est répertorié dans Paquets installés.

  3. Quitter la boîte de dialogue.

Procédure. Créer un certificat
  1. Configurez les paramètres de communication et la passerelle de votre appareil.

  2. Cliquez Afficher → Écran de sécurité et sélectionnez le Appareils languette.

  3. Cliquez sur le _csa_icon_refresh.png symbole là.

    La vue vous informe des certificats installés pour les périphériques trouvés sur le réseau et fournit des icônes de commande pour la gestion des certificats.

  4. Dans la liste d’informations de gauche, sélectionnez l’appareil avec lequel vous souhaitez établir une connexion sécurisée.

    Selon le canal de connexion, la liste d'informations de droite affiche les certificats disponibles sur cet appareil. Par exemple, des certificats peuvent exister pour le Serveur OPC UA, Communication cryptée, Application cryptée, et Serveur Web Canaux de communication. Canaux désactivés (grisés) marqués comme (pas disponible) je n'ai pas de certificat.

  5. Dans cette liste d'informations, sélectionnez le Serveur Web chaîne et cliquez sur le _csa_icon_create_cert.png symbole à gauche.

    Une boîte de dialogue s'ouvre pour les paramètres du certificat.

  6. Définissez la longueur de la clé (exemple : 3072) et la période de validité (exemple : 365 jours). Cliquez sur D'ACCORD pour fermer la boîte de dialogue.

    Remarque : Pour des raisons de sécurité, la durée de validité doit être la plus courte possible. Cependant, la mise à jour constante du certificat prend du temps. Si vous avez besoin du certificat pendant une période prolongée, il est conseillé de trouver un juste équilibre entre sécurité et praticité (mises à jour rares).

    Un certificat est maintenant créé pour le serveur web. Une fois l'opération terminée, les données du certificat s'affichent dans l'onglet.

  7. Redémarrez ensuite votre appareil avec le runtime.

  8. Téléchargez l'application avec la visualisation pour le CODESYS WebVisu à cet appareil.

    Votre appareil est prêt pour une connexion sécurisée.

Procédure. Établir une connexion HTTPS
  1. Ouvrez votre navigateur et spécifiez l'adresse URL de votre serveur Web (exemple : https://localhost:443/webvisu.htm).

    L'URL a le format : https:// <adresse IP/URL> :443/<nom du fichier HTM>.htm.

    Le nom du fichier HTML doit correspondre au nom dans la configuration du gestionnaire de visualisation dans le WebVisu objet. Vous obtenez l'adresse IP à partir de la configuration de votre appareil.

    Le navigateur établit une connexion. Si le certificat n'est pas approuvé, un message de sécurité s'affiche.

  2. Confirmez que vous connaissez le risque et que vous souhaitez continuer.

    Vous avez créé un certificat auto-signé. Sa validité peut être validée, par exemple par Empreinte en affichant l'empreinte digitale dans le navigateur, puis en la comparant avec la valeur de l'agent de sécurité.

    La page WebVisu s'ouvre alors. Le symbole de cadenas dans le navigateur indique une communication sécurisée.

    _cds_img_clientobjectsdemo.png

Important

BeagleBone Noir

Si vous utilisez un BeagleBone Black comme périphérique de visualisation, sachez qu'il utilise le port 9090 pour son serveur web. Voici une adresse IP valide : http://192.168.7.2:9090/webvisu.htm